<template>
    <view class="Popupfilter">
        <view class="fil_item" v-if="bumphNoShow">
            <view class="fil_title">公文字号</view>
            <view class="fil_cont date_cont">
                <up-input class="searchInput"  prefixIcon="search" shape="circle" clearable placeholder="请输入公文字号"
                    v-model="bumphNo"></up-input>
            </view>
        </view>
        <view class="fil_item" v-if="urgency">
            <view class="fil_title">缓急程度</view>
            <view class="fil_cont date_cont">
                <view :class="acIndex === index ? 'cont_ac cont_item' : 'cont_item'" @tap="clickStatus(ele, index)"
                    v-for="(ele, index) in statuss" :key="ele.id">{{ ele.name
                    }}</view>
            </view>
        </view>

        <view class="fil_item">
            <view class="fil_title">{{ notice ? '通知日期' : '日期范围' }}</view>
            <view class="fil_cont">
                <view :class="dcIndex === index ? 'cont_ac cont_item' : 'cont_item'" @tap="clickDates(ele, index)"
                    v-for="(ele, index) in dates" :key="ele.id">{{ ele.name }} </view>
            </view>
        </view>
        <view v-show="dcIndex == 5" class="zdy_date">{{ dates[5].t.join(' - ') }}</view>
    </view>
    <view class="submit_btn" :style="{ bottom: safeAreaInsets!.bottom + 60 + 'px' }">
        <view class="cancel" @tap="handleFilter(0)">取消</view>
        <view class="confime" @tap="handleFilter(1)">提交</view>
    </view>
    <termPicker @cancel="dateShow = false" :visable.sync="dateShow && dcIndex == 5" :defaultDate="defaultDate"
        :timeLimit="false" :deferYear="0" startText="开始" endText="结束" @confirm="confirm" />
</template>
    
<script setup lang="ts">
import termPicker from '@/components/term-picker.vue';
import { getDateRange, formatTimestamp } from '@/utils/common'
import { ref, onMounted } from 'vue'
const { safeAreaInsets } = uni.getSystemInfoSync()
const props = defineProps({
    info: {},
    urgency: {
        type: Boolean,
        default: true
    },
    notice: {
        type: Boolean,
        default: false
    },
    bumphNoShow: {
        type: Boolean,
        default: false
    }
})
const $emit = defineEmits(['filter'])
const acIndex = ref(0)
const bumphNo = ref('')
const dcIndex = ref(0)
const dateShow = ref(false)

const defaultDate: any = ref([])
const statuss = [
    { name: '全部', id: 0 },
    { name: '特急', id: 3 },
    { name: '加急', id: 2 },
    { name: '平急', id: 1 }]

const dates: any = ref([
    { name: '不限', id: 0, t: '' },
    { name: '一个月以内', id: 1, t: getDateRange('oneMonth') },
    { name: '三个月以内', id: 2, t: getDateRange('threeMonths') },
    { name: '半年内', id: 3, t: getDateRange('sixMonths') },
    { name: '一年内', id: 4, t: getDateRange('oneYear') },
    { name: '自定义', id: 5, t: [] },
])
const confirm = (e: string | string[]) => {
    dateShow.value = false
    dates.value[5].t = e
}
onMounted(() => {
    const date = formatTimestamp('', 'YYYY-MM-DD')
    defaultDate.value = [date, date]
})
const clickStatus = (_item: any, index: number) => {
    acIndex.value = index

}
const clickDates = (_item: any, index: number) => {
    dcIndex.value = index
    if (index === 5) {
        dateShow.value = true
    }
}
const handleFilter = (t: any) => {
    $emit('filter', {bumphNo:bumphNo.value.trim(), t: t, status: statuss[acIndex.value].id, date: dates.value[dcIndex.value].t })


}

</script>
    
<style lang="scss">
page {
    width: 100%;
    height: 100%;
}

.searchInput {
    border: 2rpx solid #d0cfcf !important;
}

.Popupfilter {
    width: 600rpx;
    padding: 80rpx 20rpx 0 35rpx;

    .fil_item {
        margin-bottom: 30rpx;

        .fil_title {
            font-weight: 700;
            font-size: 34rpx;
            margin-bottom: 30rpx;
        }

        .date_cont {
            justify-content: space-between;

            .cont_item {
                padding: 10rpx 46rpx !important;
            }
        }

        .fil_cont {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start !important;



            .cont_item {
                padding: 10rpx 25rpx;
                background-color: #f3f3f3;
                border-radius: 35rpx;
                text-align: center;
                color: #333;
                font-size: 30rpx;
                margin-bottom: 25rpx;
                border: 2rpx solid transparent;
                margin-right: 15rpx;
            }

            .cont_ac {
                background-color: #e6f2fb;
                color: #0D80D7;
                border: 2rpx solid #0D80D7;
            }

        }
    }

}

.submit_btn {
    position: absolute;
    bottom: 20rpx;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // background-color: pink;

    .cancel,
    .confime {
        width: 240rpx;
        height: 88rpx;
        border-radius: 44rpx;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #000000;
        font-size: 28rpx;
        border: 2rpx solid #DCDCDC;
    }

    .confime {
        background-color: #0d80d7;
        color: #fff;
    }
}
</style>
    